import { Link, Outlet, useNavigate } from "react-router-dom";

export default function Home() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/state", {
      // replace: true
      state: {
        name: "jack",
        age: 18,
      },
    });
  };

  return (
    <>
      <ul>
        <li>
          {/* 
            1. 路由参数：search -> querystring 查询字符串参数

              传递参数：路由路径后面传参：?key=value&key=value
          */}
          <Link to="/search?name=jack&age=18">search</Link>
        </li>
        <li>
          {/* 
            2. 路由参数：params 

            配置路由路径：/xxx/:xxx

            传递参数：/xxx/123
          */}
          <Link to="/params/123">params123</Link> ----
          <Link to="/params/456">params456</Link> ----
          <Link to="/params/789">params789</Link>
        </li>
        <li>
          {/* 
            3. 路由参数：state

              使用编程式导航传递 state 参数
          */}
          <div onClick={handleClick}>state</div>
        </li>
      </ul>

      {/* 加载渲染子路由组件 */}
      <Outlet />
    </>
  );
}
